<template>
    <div id="order">
        <van-tabs>
            <van-tab title="未发货" name="未发货">
                <van-list>
                    <div id="list">
                        <van-cell><div class="item">
                            <div class="imag">
                                <img src="https://img11.360buyimg.com/n2/jfs/t3283/351/3987631795/180206/8f267dcd/57fb2bbdN773b764f.jpg!q95.jpg" alt="">
                            </div>
                            <div class="info">
                            <span>
                                 迪士尼(Disney)儿童保温杯婴儿学饮杯不锈钢小孩牛奶杯子
                            </span>

                                <div class="text">
                                    宝宝幼儿喝水训练杯小口杯290ML HM1623A 漫威蓝
                                </div>
                            </div>
                            <div class="first">
                                <div class="price">
                                    $39.00
                                    <div style="font-size: 10px; color: #aaa">
                                        x1
                                    </div>
                                </div>
                            </div>
                        </div></van-cell>
                        <van-cell><div class="item">
                            <div class="imag">
                                <img src="https://img11.360buyimg.com/n2/jfs/t3283/351/3987631795/180206/8f267dcd/57fb2bbdN773b764f.jpg!q95.jpg" alt="">
                            </div>
                            <div class="info">
                            <span>
                                 迪士尼(Disney)儿童保温杯婴儿学饮杯不锈钢小孩牛奶杯子
                            </span>

                                <div class="text">
                                    宝宝幼儿喝水训练杯小口杯290ML HM1623A 漫威蓝
                                </div>
                            </div>
                            <div class="first">
                                <div class="price">
                                    $39.00
                                    <div style="font-size: 10px; color: #aaa">
                                        x1
                                    </div>
                                </div>
                            </div>
                        </div></van-cell>
                        <van-cell><div class="item">
                            <div class="imag">
                                <img src="https://img11.360buyimg.com/n2/jfs/t3283/351/3987631795/180206/8f267dcd/57fb2bbdN773b764f.jpg!q95.jpg" alt="">
                            </div>
                            <div class="info">
                            <span>
                                 迪士尼(Disney)儿童保温杯婴儿学饮杯不锈钢小孩牛奶杯子
                            </span>

                                <div class="text">
                                    宝宝幼儿喝水训练杯小口杯290ML HM1623A 漫威蓝
                                </div>
                            </div>
                            <div class="first">
                                <div class="price">
                                    $39.00
                                    <div style="font-size: 10px; color: #aaa">
                                        x1
                                    </div>
                                </div>
                            </div>
                        </div></van-cell>
                        <van-cell><div class="item">
                            <div class="imag">
                                <img src="https://img11.360buyimg.com/n2/jfs/t3283/351/3987631795/180206/8f267dcd/57fb2bbdN773b764f.jpg!q95.jpg" alt="">
                            </div>
                            <div class="info">
                            <span>
                                 迪士尼(Disney)儿童保温杯婴儿学饮杯不锈钢小孩牛奶杯子
                            </span>

                                <div class="text">
                                    宝宝幼儿喝水训练杯小口杯290ML HM1623A 漫威蓝
                                </div>
                            </div>
                            <div class="first">
                                <div class="price">
                                    $39.00
                                    <div style="font-size: 10px; color: #aaa">
                                        x1
                                    </div>
                                </div>
                            </div>
                        </div></van-cell>
                    </div>
                </van-list>

            </van-tab>
            <van-tab title="已发货" name="已发货">已发货</van-tab>
            <van-tab title="已收货" name="已收货">已收货</van-tab>
        </van-tabs>
    </div>
</template>

<script>
    import {List, Cell, Tabs, Tab} from 'vant';
    export default {
        name: "Order",
        components: {
            "van-list": List,
            "van-cell": Cell,
            "van-tabs": Tabs,
            "van-tab": Tab
        },
        data(){
            return{
                activeName: "未发货"
            }
        }
    }
</script>

<style lang="less">
    #list{
        .item{
            margin-top: 10px;
            margin-bottom: 10px;
            margin-left: 20px;
            display: flex;
            justify-content: space-around;
            .imag{
                width: 70px;
                height: 70px;
            }
            .info{
                width: 170px;
                font-size: 14px;
                .text{
                    font-size: 12px;
                    color: #aaa;
                }
            }
            .price{
               text-align: center;
                margin-top: 10px;
            }
        }
    }
</style>
